<template>
  <el-breadcrumb separator="/">
    <template v-for="(item,index) in breadcrumbData" :key="index">
      <el-breadcrumb-item v-if="item.path==='/dashboard'" :to="{path:'/'}">
        {{ item.meta.title }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else>{{ item.meta.title }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>


</template>

<script setup lang="ts">
import {RouteLocationMatched, useRoute} from "vue-router";
import {onMounted, Ref, ref, watch} from "vue";

const route = useRoute();

// 面包屑数据
const breadcrumbData: Ref<RouteLocationMatched[]> = ref([])

const getBreadcrumbs = () => {
  // 获取所有含有meta和title的数据
  let matched = route.matched.filter(item => item.meta && item.meta.title)
  // 判断首页  如果没有首页就构造一个首页
  const first = matched[0]
  if (first.path !== '/dashboard') {
    matched = [{path: '/dashboard', meta: {title: '首页'}} as any].concat(matched)
  }
  breadcrumbData.value = matched
}

// 监听路由变化
watch(() => route.path, () => getBreadcrumbs())

// 页面进入时
onMounted(() => getBreadcrumbs())
</script>

<style scoped lang="scss">

</style>